<template>
    <div class="staffadd">
        <el-form ref="ruleFormRef" style="max-width: 380px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="姓名" prop="username">
                <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="工号" prop="workNumber">
                <el-input v-model="ruleForm.workNumber" disabled />
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
                <el-input v-model="ruleForm.mobile" disabled />
            </el-form-item>
            <el-form-item label="部门" prop="departmentId">
                <el-cascader v-model="ruleForm.departmentId" :options="data" style="width: 100%;" :props="props"
                    @change="handleChange" />
            </el-form-item>
            <el-form-item label="聘用形式" prop="formOfEmployment">
                <el-select v-model="ruleForm.formOfEmployment" placeholder="Activity zone">
                    <el-option label="正式" :value="1" />
                    <el-option label="非正式" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="入职时间" prop="timeOfEntry">
                <el-date-picker v-model="values1" style="width: 100%;" type="date" placeholder="Pick a day" :size="size"
                    @change="timeOfEntry" />
            </el-form-item>
            <el-form-item label="转正时间" prop="correctionTime">
                <el-date-picker v-model="values2" style="width: 100%;" type="date" placeholder="Pick a day" :size="size"
                    @change="correctionTime" />
            </el-form-item>
            <el-form-item label="员工头像" prop="staffPhoto" style="height: 190px;overflow: hidden;">
                <el-upload class="avatar-uploader" @change="unloads" :auto-upload="false">
                    <img v-if="ruleForm.staffPhoto" :src="ruleForm.staffPhoto" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted,watchEffect } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useStore } from '@/stores/counter'
import { getSelectList, getStaffRole, editStaff } from "@/api/staff"
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = useStore()
const render = () => {
    getStaffRole(String(route.query.id)).then(res => {
        console.log(123);
        console.log(res);
        ruleForm.value = {
            id: res.data.data.id,
            username: res.data.data.username,
            mobile: res.data.data.mobile,
            formOfEmployment: res.data.data.formOfEmployment,
            workNumber: res.data.data.workNumber,
            departmentId: res.data.data.departmentId,
            timeOfEntry: res.data.data.timeOfEntry,
            correctionTime: res.data.data.correctionTime,
            staffPhoto: res.data.data.staffPhoto
        }
        values1.value = res.data.data.timeOfEntry
        values2.value = res.data.data.correctionTime
    })
}
watchEffect(()=>{
    render()
})
let values1 = ref('')
let values2 = ref('')
interface RuleForm {
    id: any
    username: string
    mobile: string
    formOfEmployment: any
    workNumber: string
    departmentId: any
    timeOfEntry: string
    correctionTime: string
    staffPhoto: any
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id: '',
    username: '',
    mobile: '',
    formOfEmployment: '',
    workNumber: '',
    departmentId: '',
    timeOfEntry: '',
    correctionTime: '',
    staffPhoto: '',
})

const rules = ref<FormRules<RuleForm>>({
    username: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { min: 11, max: 11, message: 'Length should be 11', trigger: 'blur' },
    ],
    formOfEmployment: [
        { required: true, message: '请输入聘用形式', trigger: 'change' },
    ],
    workNumber: [
        { required: true, message: '请输入工号', trigger: 'blur' },
    ],
    departmentId: [
        { required: true, message: '请输入部门', trigger: 'change' },
    ],
    timeOfEntry: [
        { required: true, message: '请输入入职时间', trigger: 'blur' },
    ],
    correctionTime: [
        { required: true, message: '请输入转正时间', trigger: 'blur' },
    ]

})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(ruleForm.value);
            editStaff(String(ruleForm.value.id), ruleForm.value).then(res => {
                console.log(res);
                if (res.data.code == 10000) {
                    ElMessage({
                        message: res.data.message,
                        type: 'success'
                    })
                    store.render(1, 10, '', 1)
                    router.go(-1)
                } else {
                    ElMessage({
                        message: res.data.message,
                        type: 'warning'
                    })
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const size = ref<'default' | 'large' | 'small'>('default')
//树形选择工具
const data = ref()
const props = {
    children: 'children',
    label: 'name',
    value: 'id'
}
const handleChange = (value: any) => {
    ruleForm.value.departmentId = Number(value.splice(value.length - 1, 1).join(''))
}

const timeOfEntry = (e: any) => {
    ruleForm.value.timeOfEntry = e.toLocaleDateString()
}
const correctionTime = (e: any) => {
    ruleForm.value.correctionTime = e.toLocaleDateString()
}
//头像上传
const unloads = (file: any) => {
    //转base64
    const reader = new FileReader()
    reader.readAsDataURL(file.raw)
    reader.onload = function () {
        ruleForm.value.staffPhoto = this.result
    }
}
const render2 = () => {
    getSelectList().then(res => {
        getDD(res.data.data)
        data.value = getDD(res.data.data);
        console.log(data.value);

    })
}
function getDD(data: any, id = 0) {
    let arr1: any = [];
    let arr2: any = [];
    data.forEach((item: any) => {
        if (item.pid == id) {
            arr2 = getDD(data, item.id);
            if (arr2.length > 0) {
                item.children = arr2;
            }
            arr1.push(item);
        }
    });
    return arr1;
}
render2()
</script>

<style scoped>
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>